<template>
  <div class="tender1">
    <Hedar></Hedar>

    <div class="logoImg">
    </div>
    <Newsnav :index="2"></Newsnav>
   <div class="contentS">
      <p class="bannerS">
        <img v-bind:src=itemimg />
      </p>
      <ul class="oUl">

        <li class="active_a" @click="clickas($event)">单一采购</li>
        <li @click="clickas($event)">采购及安装</li>
        <li @click="clickas($event)">纯劳务</li>
        <li class="active_B" @click="clickas($event)">专业分包</li>
        <!--<li  class="active_B" @click="clickas($event)">其他</li>-->

      </ul>
      <p class="GCFB"> <span class="GCname">工程名称 </span> <span class="FBdata">发布日期 </span></p>
      <ul class="oUl2">
          <li v-for="item in  items">
            <router-link :to="{path:'/Tenderhall',query: { id:item.id}}">
              <div class="leftUl">
                <p>{{item.projectName}}</p>
                <p>报名截止时间：<span>{{format(item.endDate,'yyyy-MM-dd HH:mm:ss')}}</span></p>
              </div>
              <div class="rightUl">{{format(item.startTime,'yyyy-MM-dd')}}</div>
            </router-link>
        </li>

       </ul>

   </div>
    <el-pagination
        class="pageS"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="counts">
      </el-pagination>
   <Footers></Footers>
  </div>
</template>

<script>
  import Takeshow from "@/components/Takeshow"
  import Footers from'@/components/Footers'
  import Newsnav from "@/components/Newsnav"
  import Hedar from'@/components/Hedar'


  export default {
    data () {
      return {
        butsata:'',
        itemimg:require('@/assets/oob.png'),
        items:[
          {name:"国家质检局标准与技术法规研究中心【灯具及开关】",data:"2017.7.7",data2:"2018.7.7"},
          {name:"国家质检局标准与技术法规研究中心【灯具及开关】",data:"2017.7.7",data2:"2018.7.7"},
          {name:"国家质检局标准与技术法规研究中心【灯具及开关】",data:"2017.7.7",data2:"2018.7.7"},
          {name:"国家质检局标准与技术法规研究中心【灯具及开关】",data:"2017.7.7",data2:"2018.7.7"},
          {name:"国家质检局标准与技术法规研究中心【灯具及开关】",data:"2017.7.7",data2:"2018.7.7"},
          {name:"国家质检局标准与技术法规研究中心【灯具及开关】",data:"2017.7.7",data2:"2018.7.7"},
          {name:"国家质检局标准与技术法规研究中心【灯具及开关】",data:"2017.7.7",data2:"2018.7.7"},
          {name:"国家质检局标准与技术法规研究中心【灯具及开关】",data:"2017.7.7",data2:"2018.7.7"}
        ],
        currentPage3: 1,
        counts: 40,
        classification:2
      }
    },
    methods: {


      format(time, format) {
        var t = new Date(time);
        var tf = function(i){return (i < 10 ? '0' : '') + i};
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
          switch(a){
            case 'yyyy':
              return tf(t.getFullYear());
              break;
            case 'MM':
              return tf(t.getMonth() + 1);
              break;
            case 'mm':
              return tf(t.getMinutes());
              break;
            case 'dd':
              return tf(t.getDate());
              break;
            case 'HH':
              return tf(t.getHours());
              break;
            case 'ss':
              return tf(t.getSeconds());
              break;
          }
        })
      },
       clickas:function(e){
          $(e.currentTarget).addClass("active_a").siblings().removeClass('active_a');
          if( $(e.currentTarget).index()==0){
              this.classification=2
          }else if( $(e.currentTarget).index()==1){
            this.classification=3
          }else if( $(e.currentTarget).index()==2){
            this.classification=4
          }else if( $(e.currentTarget).index()==3){
            this.classification=5
          }

         this.butnbase(this.classification,20,1)
       },
       handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
         this.butnbase(this.classification,20,val)
         window.scrollTo(0,0);
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)

        this.butnbase(this.classification,20,val)
        window.scrollTo(0,0);
      },
      butnbase(list,countt,pagee){
         let that=this
        $.ajax({
          type: "post",
          url: local+"/awm/tender/selectListTender",
          data: {
            tenderId:' ',
            classification:list,
            count:countt,
            page:pagee
          },
          dataType: "json",
          beforeSend:function (xhr) {
            xhr. withCredentials=true
          },
          success: function(data){
              console.log(data)
            that.counts=data.resultData.count
            that.items=data.resultData.list
          },
          error:function(aa){
            console.log(aa)
          }
        });
      }
    },
    mounted () {
      this.butnbase(2,20,1)
      window.scrollTo(0,0);
    },
    components: {
      Newsnav,
      Takeshow,
      Hedar,
      Footers,

    }
  }
</script>
<style scoped>
  .tender1{
    width:100%;
    min-height:1000px;
    /*background: url("../assets/dsbbbbb1.png");*/
  }
  .bbqc .el-dialog {
    width:800px;
    height:400px;
  }
  .logoImg{
    width:100%;
    height:120px;
    background:url(../assets/logobig1.png) no-repeat 0 0;
    overflow: hidden;
  }
  .logoImg .lOgin_search{
    width:490px;
    height:38px;
    margin:40px 0 0 282px;
  }
  .logoImg .lOgin_search input{
    width:408px;
    height:36px;
    background: #eaeaea;
    float:left;
    border:1px solid #ff8328;

  }
  .logoImg .lOgin_search span{
    width:80px;
    height:38px;
    line-height: 38px;
    background:#ff8328;
    float:left;
    color:#eff4fa;
  }
  .logoImg .lOgin_search span:hover{
    cursor: pointer;
  }
  .contentS{
    width:98%;
    background:#fff;
    min-height:1000px;
    margin:10px auto 0px;
  }
  .bannerS{
    height:150px;
    width:1150px;
    padding:12px 40px 0px 40px;
    margin-bottom:10px;
  }
  .bannerS img{
    height:150px;
    width:1150px;

  }
 .contentS .oUl{
    padding-left:40px;
    width:1150px;
    height:53px;
    overflow: auto;
    zoom: 1;

 }
  .contentS .oUl li{
     width:276px;
     margin-right:15px;
     height:53px;
     line-height:53px;
     background:#e8e8e8;
     float:left;
     font-size:21px;
     font-weight: 700;


  }

  .contentS .oUl li:hover{
  cursor: pointer;
  }
  .active_a{
    color:#ff8328;
  }
  .contentS .oUl .active_B{
    margin-right:0px;
  }
  .GCFB{
    width:1150px;
    height:45px;
    background:#f1f1f1;
    margin-left:40px;
    font-size:17px;
    line-height:45px;
    margin-top:13px;
    text-align:left;
  }
  .GCFB .GCname{
    display:inline-block;
    width:700px;
    margin-left:330px;
  }
  .GCFB .FBdata{
    display:inline-block;
  }
  .oUl2{
    width:1150px;
    margin-left:40px;
    min-height:10px;

  }
  .oUl2 li{
    width:1150px;
    height:65px;
    padding-top:25px;
    border-bottom:1px dashed #c9c9c9;
    overflow: auto;
    zoom: 1;
  }
  .oUl2 li .leftUl{
    width:975px;
    float:left;
    text-align:left;
  }
  .oUl2 li .rightUl{
    width:175px;
    float:right;

    height:65px;
    line-height:35px;
    font-size:18px;
  }
  .leftUl p:nth-child(1){
    height:35px;
    font-size:18px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .leftUl p:nth-child(2){
    height:30px;
    font-size:14px;
  }
  .leftUl p:nth-child(2) span{
   color:#ca2525;

  }
  .pageS{
    padding:25px;
    height:30px;

  }

</style>
